<template>
  <div class="container">
    <el-dialog
      title="设置商品加价"
      :visible.sync="dialog.centerDialogVisible"
      @open="open"
      @close="cancel"
      width="800px"
      center
    >
      <div class="top">
        <el-select
          v-model="search.area"
          filterable
          remote
          center
          reserve-keyword
          placeholder="请输入区域"
          :remote-method="insideRemoteMethods"
          :loading="insideArea.loading"
        >
          <el-option
            v-for="item in insideArea.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button
          size="small"
          type="primary"
          class="handleSearch"
          icon="el-icon-search"
          @click="handleSearch()"
          >查询</el-button
        >
        <el-button
          size="small"
          type="danger"
          class="handleSearch"
          icon="el-icon-delete"
          @click="empty()"
          >清空</el-button
        >
        <el-button
          class="add"
          type="primary"
          size="small"
          icon="el-icon-circle-plus-outline"
          @click="add()"
          >添加加价</el-button
        >
      </div>
      <el-table
        max-height="600"
        :data="tableData"
        border
        style="width: 100%"
        empty-text="暂无数据"
      >
        <el-table-column
          prop="area_name"
          label="区域名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="typeMsg"
          label="加价类型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="percentage"
          label="加价值(元/百分比)"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="fixed_price"
          label="门店到货价"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="handleEdit(scope)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination
        @page="handleSizeChange"
        @pagesize="handleCurrentChange"
        :pageData="pageData"
      ></pagination>
      <el-dialog
        append-to-body
        width="500px"
        :title="dialogCenter.dialogType === 'edit' ? '修改区域' : '添加区域'"
        :visible.sync="dialogCenter.centerDialogVisible"
        center
        @close="cancels"
      >
        <el-form label-width="150px">
          <el-form-item label="区域：">
            <el-select
              v-model="form.area_code"
              filterable
              remote
              center
              reserve-keyword
              placeholder="请输入区域"
              :remote-method="insideRemoteMethod"
              :loading="insideArea.loading"
              @change="areaItem(form.area_code)"
            >
              <el-option
                v-for="item in insideAreaDialog.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <p class="title">订单预提加价设置</p>
          <el-form-item label="加价类型：">
            <el-select v-model="form.type" placeholder="请选择">
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="加价值(元/百分比)：">
            <el-input-number
              :controls="false"
              v-model="form.percentage"
              controls-position="right"
              :precision="4"
            ></el-input-number>
          </el-form-item>
          <p class="title">订单加价设置</p>
          <el-form-item label="加价类型：">
            <el-select v-model="form.m_type" placeholder="请选择">
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="加价值(元/百分比)：">
            <el-input-number
              :controls="false"
              v-model="form.markup"
              controls-position="right"
              :precision="4"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="门店到货价：">
            <el-input-number
              :controls="false"
              v-model="form.fixed_price"
              controls-position="right"
              :precision="4"
            ></el-input-number>
          </el-form-item>
          <p class="title">调拨加价设置</p>
          <el-form-item label="加价类型：">
            <el-select v-model="form.allocation_type" placeholder="请选择">
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="加价值(元/百分比)：">
            <el-input-number
              :controls="false"
              v-model="form.allocation_markup"
              controls-position="right"
              :precision="4"
            ></el-input-number>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancels">取 消</el-button>
          <el-button type="primary" @click="confirm()">确 定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>
<script>
import {
  getPercentageInfo,
  setPercentageInfo,
  selectAreaList,
} from "@/api/commodity/commodityList";
import Pagination from "@/components/pagination";
// import { getAreaList } from "@/api/permission/adminlist";
export default {
  props: {
    dialog: Object,
  },
  components: {
    pagination: Pagination,
  },
  data() {
    return {
      //分页
      pageData: {
        pageSizes: [10, 20],
        pageSize: 10,
        page: 1,
        total: null,
        layout: "total, sizes, prev, pager, next, jumper",
      },
      dialogCenter: {
        dialogType: "",
        centerDialogVisible: false,
        id: "",
      },
      form: {
        goods_code: "",
        erp_goods_id: "",
        type: 1,
        percentage: 0,
        area_code: "",
        area_name: "",
        id: "",
        fixed_price: "",
        m_type: 1,
        markup: 0,
        allocation_type: 1,
        allocation_markup: 0,
      },
      typeList: [
        {
          value: 1,
          label: "按值加价",
        },
        {
          value: 2,
          label: "按比例加价",
        },
      ],
      search: {
        area: "",
      },
      tableData: [],
      insideArea: {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false,
      },
      insideAreaDialog: {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false,
      },
    };
  },
  created() {},
  methods: {
    //关闭
    cancel() {
      this.insideArea = {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false,
      };
      this.search = {
        area: "",
      };
      this.dialog.centerDialogVisible = false;
    },
    empty() {
      this.search = {
        area: "",
      };
    },
    // 关闭弹窗
    cancels() {
      this.dialogCenter.centerDialogVisible = false;
      this.form = {
        goods_code: "",
        erp_goods_id: "",
        type: 1,
        percentage: 0,
        area_code: "",
        area_name: "",
        id: "",
        fixed_price: "",
        m_type: 1,
        markup: 0,
        allocation_type: 1,
        allocation_markup: 0,
      };
      this.insideAreaDialog = {
        innerVisible: false,
        options: [],
        value: "",
        list: [],
        loading: false,
      };
    },
    open() {
      this.getData();
      this.getInsideArea();
    },
    // 获取数据
    getData() {
      let data = {
        limit: this.pageData.pageSize,
        page: this.pageData.page,
        goods_code: this.dialog.code,
        area_key: this.search.area,
      };
      getPercentageInfo(data).then((res) => {
        if (res.code == 0) {
          res.data.data.forEach((item) => {
            item.typeMsg = item.type == 1 ? "按值加价" : "按比例加价";
            item.m_typeMsg = item.m_type == 1 ? "按值加价" : "按比例加价";
          });
          this.tableData = res.data.data;
          this.pageData.page = res.data.current_page;
          this.pageData.pagesize = res.data.per_page;
          this.pageData.total = res.data.total;
        }
      });
    },
    getInsideArea(query = "") {
      let data = {
        page: 1,
        limit: 50,
        key: query,
      };
      //获取初始化区域列表
      selectAreaList(data).then((res) => {
        this.insideArea.options = res.data.map((item) => {
          return {
            value: `${item.area_code}`,
            label: `${item.area_name}(${item.area_code})`,
          };
        });
      });
    },
    getInsideAreas(query = "") {
      let data = {
        page: 1,
        limit: 50,
        key: query,
      };
      //获取初始化区域列表
      selectAreaList(data).then((res) => {
        this.insideAreaDialog.options = res.data.map((item) => {
          return { value: `${item.area_code}`, label: `${item.area_name}` };
        });
      });
    },
    // 搜索区域
    insideRemoteMethods(query) {
      if (query !== "") {
        this.getInsideArea(query);
      } else {
        this.insideArea.options = [];
      }
    },
    // 搜索弹窗区域
    insideRemoteMethod(query) {
      if (query !== "") {
        this.getInsideAreas(query);
      } else {
        this.insideAreaDialog.options = [];
      }
    },
    // 本地搜索
    handleSearch() {
      this.pageData.page = 1;
      this.pageData.total = null;
      this.getData();
    },
    areaItem(code) {
      let insidearr = this.insideAreaDialog.options.filter((res) => {
        return res.value == code;
      });
      this.form.area_name = insidearr[0].label;
      console.log(this.form.area_name);
    },
    //添加
    add() {
      this.dialogCenter = {
        dialogType: "",
        centerDialogVisible: true,
        id: "",
      };
      this.getInsideAreas();
    },
    // 编辑
    handleEdit(scope) {
      this.dialogCenter = {
        dialogType: "edit",
        centerDialogVisible: true,
        id: scope.row.id,
      };
      this.form = {
        goods_code: scope.row.erp_goods_code,
        erp_goods_id: scope.row.erp_goods_id,
        type: scope.row.type,
        percentage: scope.row.percentage,
        area_code: scope.row.area_code,
        area_name: scope.row.area_name,
        id: scope.row.id,
        fixed_price: scope.row.fixed_price,
        m_type: scope.row.m_type,
        markup: scope.row.markup,
        allocation_type: scope.row.allocation_type,
        allocation_markup: scope.row.allocation_markup,
      };
      this.getInsideAreas();
    },
    //确定
    confirm() {
      if (this.form.area_code) {
        let data = {
          goods_code: this.dialog.code,
          erp_goods_id: this.dialog.id,
          type: this.form.type,
          percentage: this.form.percentage,
          area_code: this.form.area_code,
          area_name: this.form.area_name,
          fixed_price: this.form.fixed_price,
          m_type: this.form.m_type,
          markup: this.form.markup,
          allocation_type: this.form.allocation_type,
          allocation_markup: this.form.allocation_markup,
        };
        if (this.dialogCenter.dialogType == "edit") {
          data.id = this.form.id;
          setPercentageInfo(data).then((res) => {
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: res.msg || res.message,
              });
              this.getData();
              this.cancels();
            }
          });
        } else {
          setPercentageInfo(data).then((res) => {
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: res.msg || res.message,
              });
              this.getData();
              this.cancels();
            }
          });
        }
      } else {
        this.$message({
          type: "info",
          message: "请选择区域",
        });
      }
    },
    //每页多少条
    handleCurrentChange(val) {
      this.pageData.page = 1;
      this.pageData.pageSize = val;

      this.getData();
    },
    //选取页数
    handleSizeChange(page) {
      this.pageData.page = page;

      this.getData();
    },
  },
};
</script>
<style scoped>
.pagination {
  text-align: right;
  padding: 10px;
  background-size: cover;
}
.top {
  margin-bottom: 10px;
  width: 100%;
  position: relative;
}
.add {
  position: absolute;
  right: 0;
  top: 5px;
}
.title {
  font-size: 18px;
  font-weight: bold;
}
</style>